<template>
  <div style="background: rgb(247, 247, 247);">
    <van-row class="m-b-1 header p-t-5 p-b-5">
      <!-- 头像 -->
      <van-col class="m-l-4" span="12">
        <van-image
          class="v-a-m"
          round
          width="4.5rem"
          height="4.5rem"
          :src="require('./assets/fruits-img8.png')"
        />
        <span class="m-l-2 c-white font">青春微凉伴离</span>
      </van-col>
    </van-row>
    <van-grid class="m-b-1" column-num="5" :border="false">
      <van-grid-item
        v-for="item in list"
        :key="item.icon"
        :icon="item.icon"
        :text="item.text"
      />
    </van-grid>
    <van-cell title="我的优惠劵" icon="coupon-o" />
    <van-cell title="收货地址" icon="free-postage" />
    <van-cell class="m-b-2" title="售后服务" icon="service-o" />
    <van-button
      @click="out"
      color="#797778"
      style="width: 90%; margin-left: 20px; height: 6.5vh; border-radius: 4px;"
      size="large"
      plain
    >
      退出登录
    </van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { icon: 'balance-o', text: '待付款' },
        { icon: 'send-gift-o', text: '待发货' },
        { icon: 'logistics', text: '待收货' },
        { icon: 'records', text: '待评价' },
        { icon: 'completed', text: '全部订单' },
      ],
    }
  },
  methods: {
    out() {
      this.$dialog
        .confirm({
          title: '退出登录',
          message: '您确认要退出码?',
        })
        .then(() => {
          alert('恭喜您退出成功!')
          this.$store.commit('SET_IS', 'Home')
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  background-image: linear-gradient(
    to right top,
    rgb(125, 172, 211),
    rgb(53, 53, 156)
  );
  background-size: 100%;
}
</style>
